<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>角色管理</title>
	<link href="../../../component/pear/css/pear.css" rel="stylesheet" />
	<script src="../../../component/layui/layui.js"></script>
	<script src="../../../component/pear/pear.js"></script>
</head>

<body class="pear-container">
	<div class="layui-card">
		<div class="layui-card-body">
			<table id="table" lay-filter="table"></table>
		</div>
	</div>
</body>

</html>

<script type="text/html" id="toolbar">
	<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
		<i class="layui-icon layui-icon-add-1"></i>
		新增
	</button>
</script>

<script type="text/html" id="bar">
	<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
	<button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="give"><i class="layui-icon layui-icon-vercode"></i></button>
	<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="del"><i class="layui-icon layui-icon-delete"></i></button>
</script>

<script type="text/html" id="templet-isActive">
	{{#if(d.isActive){}}
	<input type="checkbox" name="isActive" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="templet-isActive" checked  }}>
	{{# }else { }}
	<input type="checkbox" name="isActive" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="templet-isActive" }}>
	{{# } }}
</script>

<script>
	layui.use(['table', 'form', 'jquery', 'permission', 'context', 'popup', 'common', 'tableext'], function () {
		let table = layui.table;
		let form = layui.form;
		let $ = layui.jquery;
		let common = layui.common;
		let permission = layui.permission;
		let context = layui.context;
		let popup = layui.popup;

		let basePath = context.get("base-path");

		table.render({
			elem: '#table',
			url: basePath + '/api/system/role/getlist',
			page: false,
			cols: [[
				{ type: 'checkbox' },
				{ title: '编号', field: 'id', align: 'center', width: 100, hide: true },
				{ title: '名称', field: 'name', align: 'center' },
				{ title: '排序', field: 'sort', align: 'center' },
				{ title: '状态', field: 'isActive', align: 'center', templet: '#templet-isActive' },
				{ title: '操作', toolbar: '#bar', align: 'center', width: 195 }
			]],
			toolbar: '#toolbar',
			parseData: function (res) {
				return {
					"count": res.data.length,
					'statusCode': res.statusCode,
					'data': res.data
				};
			},
		});

		table.on('tool(table)', function (obj) {
			if (obj.event === 'edit') {
				window.edit(obj);
			} else if (obj.event === 'give') {
				window.give(obj);
			} else if (obj.event === 'del') {
				window.del(obj);
			}
		});

		table.on('toolbar(table)', function (obj) {
			if (obj.event === 'add') {
				window.add();
			} else if (obj.event === 'refresh') {
				window.refresh();
			}
		});

		form.on('switch(templet-isActive)', function (obj) {
			$.ajax({
				url: basePath + '/api/system/role/setactive',
				data: JSON.stringify({ "id": obj.value }),
				success: function (result) {
					if (result.succeeded) {
						popup.success("设置成功");
					} else {
						popup.failure(JSON.stringify(result.errors));
					}
				}
			})
		});

		window.add = function () {
			layer.open({
				type: 2,
				title: '新增角色',
				shade: 0.1,
				area: ['500px', '400px'],
				content: 'add.html?fresh=' + Math.random()
			});
		}

		window.give = function (obj) {
			layer.open({
				type: 2,
				title: '分配',
				shade: 0.1,
				area: ['800px', '600px'],
				content: 'give.html?id=' + obj.data['id'] + '&fresh=' + Math.random()
			});
		}

		window.edit = function (obj) {
			layer.open({
				type: 2,
				title: '修改角色',
				shade: 0.1,
				area: ['500px', '400px'],
				content: 'edit.html?id=' + obj.data['id'] + '&fresh=' + Math.random()
			});
		}

		window.del = function (obj) {
			let lock = false;
			layer.confirm('确定要删除该角色', {
				icon: 3,
				title: '提示'
			}, function (index) {
				if (!lock) {
					lock = true;
					layer.close(index);
					let roleId = obj.data['id'];
					let loading = layer.load();
					$.ajax({
						url: basePath + "/api/system/role/del",
						data: JSON.stringify({ Id: roleId }),
						success: function (result) {
							layer.close(loading);
							if (result.succeeded) {
								popup.success("删除成功", function () {
									obj.del();
								});
							} else {
								popup.failure(JSON.stringify(result.errors));
							}
						}
					})
				}
			});
		}

		window.refresh = function () {
			table.reload('table');
		}
	})
</script>